[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Playfair_Display, Source_Sans_3 } from "next/font/google" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], display: "swap", variable: "--font-playfair", }) const sourceSans = Source_Sans_3({ subsets: ["latin"], display: "swap", variable: "--font-source-sans", }) export const metadata: Metadata = { title: "Beach Day Planner", description: "Plan your perfect beach day with weather, tides, and safety conditions", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added custom fonts for beach theme */ --font-serif: var(--font-playfair); --font-sans: var(--font-source-sans); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/api/beach-data/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" interface WeatherData { temp: number condition: string humidity: number visibility: number } interface UVData { index: number risk: string } interface WindData { speed: number direction: string } interface TideData { high: string low: string current: string } interface BeachFlagData { color: string meaning: string } const getWeatherCondition = (weatherCode: number): string => { if (weatherCode === 0) return "Clear" if (weatherCode >= 1 && weatherCode <= 3) return "Partly Cloudy" if (weatherCode >= 45 && weatherCode <= 48) return "Foggy" if (weatherCode >= 51 && weatherCode <= 57) return "Drizzle" if (weatherCode >= 61 && weatherCode <= 67) return "Rainy" if (weatherCode >= 71 && weatherCode <= 77) return "Snowy" if (weatherCode >= 80 && weatherCode <= 86) return "Showers" if (weatherCode >= 95 && weatherCode <= 99) return "Thunderstorm" return "Clear" } const getCoordinates = async (location: string): Promise<{ lat: number; lon: number } | null> => { try { const response = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(location)}&count=1&language=en&format=json`, { headers: { "User-Agent": "BeachDayPlanner/1.0", }, }, ) if (!response.ok) { console.warn(`Geocoding API failed with status ${response.status}`) return null } const data = await response.json() console.log(data) if (data.results && data.results.length > 0) { return { lat: data.results[0].latitude, lon: data.results[0].longitude, } } return null } catch (error) { console.warn("Geocoding error:", error) return null } } export async function POST(request: NextRequest) { try { const { location, coordinates } = await request.json() let lat = 33.6891 let lon = -78.8867 if (coordinates) { lat = coordinates.lat lon = coordinates.lon } else if (location) { const coords = await getCoordinates(location) if (coords) { lat = coords.lat lon = coords.lon } else { console.warn(`Location "${location}" not found, using default coordinates`) } } const weatherController = new AbortController() const weatherTimeout = setTimeout(() => weatherController.abort(), 10000) try { const weatherResponse = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m,wind_gusts_10m&daily=uv_index_max&hourly=visibility&timezone=auto&temperature_unit=fahrenheit&wind_speed_unit=mph`, { signal: weatherController.signal, headers: { "User-Agent": "BeachDayPlanner/1.0", }, }, ) clearTimeout(weatherTimeout) if (!weatherResponse.ok) { throw new Error(`Open-Meteo API returned ${weatherResponse.status}: ${weatherResponse.statusText}`) } const weatherData = await weatherResponse.json() const weather: WeatherData = { temp: Math.round(weatherData.current?.temperature_2m || 75), condition: getWeatherCondition(weatherData.current?.weather_code || 0), humidity: weatherData.current?.relative_humidity_2m || 60, visibility: Math.round((weatherData.hourly?.visibility?.[0] || 10000) / 1609.34), // Convert meters to miles } const getUVRisk = (index: number): string => { if (index <= 2) return "Low" if (index <= 5) return "Moderate" if (index <= 7) return "High" if (index <= 10) return "Very High" return "Extreme" } const uvIndex = weatherData.daily?.uv_index_max?.[0] || 5 const uv: UVData = { index: Math.round(uvIndex), risk: getUVRisk(uvIndex), } const getWindDirection = (degrees: number): string => { const directions = [ "N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW", ] return directions[Math.round(degrees / 22.5) % 16] } const wind: WindData = { speed: Math.round(weatherData.current?.wind_speed_10m || 0), direction: getWindDirection(weatherData.current?.wind_direction_10m || 0), } let tideData = null try { const tideController = new AbortController() const tideTimeout = setTimeout(() => tideController.abort(), 5000) const tideResponse = await fetch( `https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?date=today&station=8661070&product=predictions&datum=mllw&units=english&time_zone=lst_ldt&format=json`, { signal: tideController.signal, headers: { "User-Agent": "BeachDayPlanner/1.0", }, }, ) clearTimeout(tideTimeout) if (tideResponse.ok) { tideData = await tideResponse.json() } } catch (tideError) { console.warn("Tide API error:", tideError) // Will use fallback data } // Process tide data with better fallback const processTideData = (tideData: any): TideData => { if (!tideData?.predictions) { const now = new Date() const currentHour = now.getHours() let highTime = "2:15 PM" let lowTime = "8:30 AM" if (currentHour < 8) { highTime = "2:15 PM" lowTime = "8:30 AM" } else if (currentHour < 14) { highTime = "2:15 PM" lowTime = "8:30 PM" } else { highTime = "2:15 AM" lowTime = "8:30 PM" } return { high: highTime, low: lowTime, current: currentHour >= 8 && currentHour <= 14 ? "Rising" : "Falling", } } const now = new Date() const predictions = tideData.predictions let nextHigh = null let nextLow = null for (const prediction of predictions) { const predTime = new Date(prediction.t) if (predTime > now) { if (prediction.type === "H" && !nextHigh) { nextHigh = predTime.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, }) } if (prediction.type === "L" && !nextLow) { nextLow = predTime.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, }) } if (nextHigh && nextLow) break } } return { high: nextHigh || "2:15 PM", low: nextLow || "8:30 AM", current: "Rising", } } const tides = processTideData(tideData) // Determine beach flag based on conditions const determineBeachFlag = (weather: WeatherData, wind: WindData, uv: UVData): BeachFlagData => { if (weather.condition.toLowerCase().includes("storm") || wind.speed > 25) { return { color: "Red", meaning: "High Hazard - Dangerous Conditions" } } if (wind.speed > 15 || uv.index > 8 || weather.condition.toLowerCase().includes("rain")) { return { color: "Yellow", meaning: "Medium Hazard - Use Caution" } } if (wind.speed > 10 || uv.index > 6) { return { color: "Yellow", meaning: "Medium Hazard - Use Caution" } } return { color: "Green", meaning: "Low Hazard - Safe Conditions" } } const flags = determineBeachFlag(weather, wind, uv) return NextResponse.json({ weather, uv, wind, tides, flags, lastUpdated: new Date().toISOString(), }) } catch (weatherError) { console.error("Open-Meteo API error:", weatherError) throw new Error("Failed to fetch weather data from Open-Meteo") } } catch (error) { console.error("Error fetching beach data:", error) return NextResponse.json({ weather: { temp: 78, condition: "Sunny", humidity: 65, visibility: 10, }, uv: { index: 8, risk: "Very High", }, wind: { speed: 12, direction: "SW", }, tides: { high: "2:15 PM", low: "8:30 AM", current: "Rising", }, flags: { color: "Yellow", meaning: "Medium Hazard - Use Caution", }, lastUpdated: new Date().toISOString(), isDemo: true, error: "Using sample data - Open-Meteo API temporarily unavailable", }) } } [V0_FILE]typescriptreact:file="app/api/beach-advice/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { groq } from "@ai-sdk/groq" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { conditions, location, hasToddler } = await request.json() const prompt = `You are a beach safety expert and family activity planner. Based on the following beach conditions for ${location}, provide personalized advice for a family ${hasToddler ? "with a 2-year-old toddler" : "planning a beach day"}. Current Conditions: - Weather: ${conditions.weather.temp}°F, ${conditions.weather.condition}, ${conditions.weather.humidity}% humidity - UV Index: ${conditions.uv.index} (${conditions.uv.risk}) - Wind: ${conditions.wind.speed} mph from ${conditions.wind.direction} - Tides: High at ${conditions.tides.high}, Low at ${conditions.tides.low}, Currently ${conditions.tides.current} - Beach Flag: ${conditions.flags.color} (${conditions.flags.meaning}) Please provide a well-structured response with: 1. Overall Recommendation: A brief assessment of today's beach conditions (1-2 sentences) 2. Best Time Windows: Specific time recommendations for beach activities today 3. Essential Items: Must-bring items based on current conditions 4. ${hasToddler ? "Toddler Safety & Activities: Specific tips for keeping a 2-year-old safe and entertained" : "Activity Suggestions: Recommended beach activities for today's conditions"} 5. Safety Alerts: Any weather or safety concerns to monitor Format your response clearly with each section. Keep it practical, friendly, and focused on family safety and enjoyment.` const { text } = await generateText({ model: groq("llama-3.1-8b-instant"), prompt, maxTokens: 600, }) return NextResponse.json({ advice: text }) } catch (error) { console.error("Error generating beach advice:", error) return NextResponse.json({ error: "Failed to generate beach advice" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/location-search.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Input } from "@/components/ui/input" import { MapPin, Search, Loader2 } from "lucide-react" import { cn } from "@/lib/utils" interface LocationResult { id: number name: string latitude: number longitude: number country: string admin1?: string admin2?: string } interface LocationSearchProps { onLocationSelect: (location: LocationResult) => void placeholder?: string className?: string } export function LocationSearch({ onLocationSelect, placeholder = "Search for a location...", className, }: LocationSearchProps) { const [query, setQuery] = useState("") const [results, setResults] = useState([]) const [isLoading, setIsLoading] = useState(false) const [isOpen, setIsOpen] = useState(false) const [selectedIndex, setSelectedIndex] = useState(-1) const searchRef = useRef(null) const inputRef = useRef(null) const searchLocations = async (searchQuery: string) => { if (searchQuery.length < 2) { setResults([]) return } setIsLoading(true) try { const response = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(searchQuery)}&count=10&language=en&format=json`, ) if (!response.ok) { throw new Error("Failed to search locations") } const data = await response.json() console.log("API Response for", searchQuery, ":", data) let locations = data.results || [] // If no results and query contains commas, try searching with just the first part if (locations.length === 0 && searchQuery.includes(",")) { const simplifiedQuery = searchQuery.split(",")[0].trim() if (simplifiedQuery !== searchQuery && simplifiedQuery.length >= 2) { console.log("Trying fallback search with:", simplifiedQuery) const fallbackResponse = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(simplifiedQuery)}&count=10&language=en&format=json`, ) if (fallbackResponse.ok) { const fallbackData = await fallbackResponse.json() console.log("Fallback API Response for", simplifiedQuery, ":", fallbackData) locations = fallbackData.results || [] } } } setResults(locations) setIsOpen(true) setSelectedIndex(-1) } catch (error) { console.error("Error searching locations:", error) setResults([]) } finally { setIsLoading(false) } } useEffect(() => { const timeoutId = setTimeout(() => { if (query.trim()) { searchLocations(query.trim()) } else { setResults([]) setIsOpen(false) } }, 300) return () => clearTimeout(timeoutId) }, [query]) useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (searchRef.current && !searchRef.current.contains(event.target as Node)) { setIsOpen(false) setSelectedIndex(-1) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) const handleKeyDown = (e: React.KeyboardEvent) => { if (!isOpen || results.length === 0) return switch (e.key) { case "ArrowDown": e.preventDefault() setSelectedIndex((prev) => (prev < results.length - 1 ? prev + 1 : 0)) break case "ArrowUp": e.preventDefault() setSelectedIndex((prev) => (prev > 0 ? prev - 1 : results.length - 1)) break case "Enter": e.preventDefault() if (selectedIndex >= 0 && selectedIndex < results.length) { handleLocationSelect(results[selectedIndex]) } break case "Escape": setIsOpen(false) setSelectedIndex(-1) inputRef.current?.blur() break } } const handleLocationSelect = (location: LocationResult) => { const displayName = `${location.name}${location.admin1 ? `, ${location.admin1}` : ""}, ${location.country}` setQuery(displayName) setIsOpen(false) setSelectedIndex(-1) onLocationSelect(location) } const formatLocationDisplay = (location: LocationResult) => { return `${location.name}${location.admin1 ? `, ${location.admin1}` : ""}, ${location.country}` } return (

setQuery(e.target.value)} onKeyDown={handleKeyDown} onFocus={() => { if (results.length > 0) { setIsOpen(true) } }} placeholder={placeholder} className="pl-10 pr-10" /> {isLoading && ( )} {!isLoading && query && ( )}

{isOpen && results.length > 0 && (

{results.map((location, index) => ( ))}

)} {isOpen && query.length >= 2 && results.length === 0 && !isLoading && (

No locations found for "{query}"

Try a different search term

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { LocationSearch } from "@/components/location-search" import { remark } from "remark" import remarkHtml from "remark-html" import { Sun, Cloud, CloudRain, Wind, Waves, Shield, RefreshCw, Eye, Droplets, Sparkles, Loader2, AlertTriangle, } from "lucide-react" interface BeachConditions { weather: { temp: number condition: string humidity: number visibility: number } uv: { index: number risk: string } wind: { speed: number direction: string } tides: { high: string low: string current: string } flags: { color: string meaning: string } lastUpdated: string isDemo?: boolean error?: string } interface LocationResult { id: number name: string latitude: number longitude: number country: string admin1?: string admin2?: string } export default function BeachDayPlanner() { const [location, setLocation] = useState("Myrtle Beach, SC") const [coordinates, setCoordinates] = useState<{ lat: number; lon: number } | null>(null) const [hasToddler, setHasToddler] = useState(true) const [aiAdvice, setAiAdvice] = useState("") const [aiAdviceHtml, setAiAdviceHtml] = useState("") const [isLoadingAdvice, setIsLoadingAdvice] = useState(false) const [isLoadingData, setIsLoadingData] = useState(false) const [error, setError] = useState("") const [conditions, setConditions] = useState({ weather: { temp: 78, condition: "Sunny", humidity: 65, visibility: 10, }, uv: { index: 8, risk: "Very High", }, wind: { speed: 12, direction: "SW", }, tides: { high: "2:15 PM", low: "8:30 AM", current: "Rising", }, flags: { color: "Yellow", meaning: "Medium Hazard", }, lastUpdated: new Date().toISOString(), }) const [lastUpdated, setLastUpdated] = useState(new Date()) const fetchBeachData = async () => { setIsLoadingData(true) setError("") try { const response = await fetch("/api/beach-data", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ location, coordinates, // Pass coordinates to API }), }) if (!response.ok) { throw new Error("Failed to fetch beach data") } const data = await response.json() setConditions(data) setLastUpdated(new Date(data.lastUpdated)) if (data.isDemo || data.error) { setError(data.error || "Using sample data") } } catch (error) { console.error("Error fetching beach data:", error) setError("Unable to fetch current beach conditions. Using sample data.") } finally { setIsLoadingData(false) } } const handleLocationSelect = (locationResult: LocationResult) => { const displayName = `${locationResult.name}${locationResult.admin1 ? `, ${locationResult.admin1}` : ""}, ${locationResult.country}` setLocation(displayName) setCoordinates({ lat: locationResult.latitude, lon: locationResult.longitude, }) } useEffect(() => { if (coordinates) { fetchBeachData() } }, [coordinates]) useEffect(() => { fetchBeachData() }, []) const refreshData = () => { fetchBeachData() } const processMarkdownToHtml = async (markdown: string) => { try { const result = await remark().use(remarkHtml, { sanitize: false }).process(markdown) return result.toString() } catch (error) { console.error("Error processing markdown:", error) return markdown // fallback to raw text } } const getAIAdvice = async () => { setIsLoadingAdvice(true) try { const response = await fetch("/api/beach-advice", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ conditions, location, hasToddler, }), }) if (!response.ok) { throw new Error("Failed to get AI advice") } const data = await response.json() setAiAdvice(data.advice) const htmlContent = await processMarkdownToHtml(data.advice) setAiAdviceHtml(htmlContent) } catch (error) { console.error("Error getting AI advice:", error) const fallbackMessage = "Sorry, unable to generate personalized advice right now. Please try again later." setAiAdvice(fallbackMessage) setAiAdviceHtml(fallbackMessage) } finally { setIsLoadingAdvice(false) } } const getWeatherIcon = (condition: string) => { switch (condition.toLowerCase()) { case "clear": case "sunny": return case "clouds": case "cloudy": return case "rain": case "rainy": return default: return } } const getUVColor = (index: number) => { if (index <= 2) return "bg-green-500" if (index <= 5) return "bg-yellow-500" if (index <= 7) return "bg-orange-500" if (index <= 10) return "bg-red-500" return "bg-purple-500" } const getFlagColor = (color: string) => { switch (color.toLowerCase()) { case "green": return "bg-green-500" case "yellow": return "bg-yellow-500" case "red": return "bg-red-500" case "purple": return "bg-purple-500" default: return "bg-gray-500" } } const getBeachRecommendation = () => { const { uv, wind, flags, weather } = conditions if (flags.color.toLowerCase() === "red" || uv.index > 9) { return { status: "Caution", message: "Consider indoor activities or wait for better conditions", color: "text-red-600", } } if (flags.color.toLowerCase() === "yellow" && uv.index > 6) { return { status: "Good with Precautions", message: "Perfect for beach time! Bring sunscreen and shade", color: "text-yellow-600", } } return { status: "Excellent", message: "Perfect beach day conditions!", color: "text-green-600" } } const recommendation = getBeachRecommendation() return (

{/* Header */}

Plan Your Perfect Beach Day!

Check real-time conditions and get AI-powered personalized recommendations for your family beach adventure

Current location: {location}

setHasToddler(checked as boolean)} /> I have a toddler (2-year-old)

Last updated: {lastUpdated.toLocaleTimeString()}

{error && (

{error}

)}

{/* Beach Recommendation */}

Beach Conditions

{recommendation.status}

{recommendation.message}

AI Beach Advisor {aiAdviceHtml ? (

) : (

Click "Get Advice" for personalized AI recommendations based on current conditions and your family needs.

)} {/* Conditions Grid */}

{/* Weather Card */} Weather {getWeatherIcon(conditions.weather.condition)}

{conditions.weather.temp}°F

{conditions.weather.condition}

{conditions.weather.humidity}%

{conditions.weather.visibility}mi

{/* UV Index Card */} UV Index

{conditions.uv.index}

{conditions.uv.risk}

{conditions.uv.index > 6 ? "Sunscreen essential!" : "Moderate protection needed"}

{/* Wind Card */} Wind

{conditions.wind.speed} mph

From the {conditions.wind.direction}

{conditions.wind.speed > 15 ? "Breezy conditions" : "Light breeze"}

{/* Tides Card */} Tides

High Tide: {conditions.tides.high}

Low Tide: {conditions.tides.low}

Currently: {conditions.tides.current}

{/* Beach Flags Card */} Beach Flags

{conditions.flags.color} Flag

{conditions.flags.meaning}

{/* Family Tips Card */} Family Tips

• Best beach time: 9 AM - 11 AM

• Bring: Sunscreen, umbrella, water

• Toddler nap time: Consider 12-2 PM break

• Evening return: After 4 PM

) }

About

Tags

Share

About

Tags

Share

More from avik-creator

More Templates Like This